<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <style>
        body{
            margin: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form action="/api/user/register" method="POST">
            <div class="form-group">
                <input class="form-control" type="text" name="petname" required placeholder="请填写昵称">
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="password" required placeholder="请填写密码">
            </div>
            <div class="form-group">
                <input class="form-control" type="password" required placeholder="请再次输入密码">
            </div>
            <div class="checkbox">
                <label>
                    <input type="radio" value="true" name="isMale" id="male" checked>
                    先生
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="radio" value="false" name="isMale" id="famale">
                    女士
                </label>
            </div>
            <div class="form-group">
                <input class="form-control" type="email" name="email" required placeholder="请输入电子邮箱地址">
            </div>
            <div class="form-group">
                <select name="course" class="form-control">
                    <option value="HTML5" selected>HTML5</option>
                    <option value="iOS">iOS</option>
                    <option value="Android">Android</option>
                </select>
            </div>
            <input type="submit" class="btn btn-success form-control" value="注册"></input>
        </form>
    </div>
    <script>
        $('form').submit(function (ev) {
            ev.preventDefault()

            var pass = $(':password').map(function () {
                return $(this).val()
            })

            if (pass[0] == pass[1]) {
                console.log('输入密码相同，准备提交数据')

                var data = $(this).serialize()
                console.log(data)

                $.post('/user/register', data, function (res) {
                    console.log(res)

                    $('.modal-body').text(res.message)
                    $('.modal').modal('show')
                        .on('hidden.bs.modal', function (e) {
                            if (res.code == 'success') {
                                location.href = '/user/signin'
                            }
                        })
                })
            }
            else {
                $('.modal-body').text('两次输入的密码不一样！')
                $('.modal').modal('show')
            }
        })
    </script>
</body>

</html>